<template>
    <div class="applyList">
        <div class="header">
        <el-row>
            <el-col :span="6">
                <div class="buttonL">
                    <el-button style="margin-right: 20px;" >全部</el-button>
                    <el-badge @click="newApply" :value="12" class="item">
                        <el-button >新申请</el-button>
                    </el-badge>   
                    <el-button @click="onClose" type="warning" plain icon="Close"   style="margin-left: 20px;" >
                        关闭  
                    </el-button>    
                </div>
            </el-col>
            <el-col :span="12"></el-col>
            <el-col style="text-align: right;" :span="6">
                <div v-if="true" class="buttonR">
                    <el-button type="primary">批量通过</el-button>
                    <el-button type="danger">批量驳回</el-button>
                    <el-button type="danger">批量删除</el-button>
                </div>
                <el-button v-else type="danger">批量删除</el-button>
            </el-col>
        </el-row>
        </div>


          <!-- 用户数据表格 -->
          <el-table  :data="userList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />

            <el-table-column width="300" label="申请人" align="left" key="applyName" prop="applyName" :show-overflow-tooltip="true">

              <template #default="scope">
                <div style="display: flex; align-items: center">
                  <div class="block">
                    <el-avatar shape="square" :size="30" :src="squareUrl||defAva" />
                  </div>
                  <span style="margin-left: 10px;">{{ scope.row.applyName}}</span>
                </div>
              </template>

            </el-table-column>


            <el-table-column label="手机号码" align="left" key="phonenumber" prop="phonenumber" width="350" />


            <el-table-column label="申请部门" align="left" key="applyDept" prop="applyDept" :show-overflow-tooltip="true" width="330" />

      
    

            <el-table-column label="申请理由" align="left" prop="applyReason" width="300"/>
              
            <el-table-column label="操作" align="left" width="300" class-name="small-padding fixed-width">
              <template #default="scope">
                    <div v-if="operateShow" class="operate">
                        <div style="color: #1890FF;">通过</div>
                        <div style="color: #F56C6C;">驳回</div>
                    </div>

                    <div v-else class="operateS">
                        <b>王华</b><span style="margin-right: 15px;">邀请加入</span><b>王华</b><span>已通过</span>
                    </div>

              </template>
            </el-table-column>
          </el-table>

      
    </div>
</template>

<script setup>
import { ref } from "vue"
import { parseTime } from "@/utils/ruoyi"
import defAva from '@/assets/images/user-default.jpg'; 
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance();
const operateShow=ref(true)
const onClose = () => {
    proxy.$tab.closePage(route).then(res => {
        router.go(-1)
    })
}
const squareUrl=ref("")
// 用户数据
const userList = ref([
  {
    applyName: "张三",
    phonenumber: 15668386863,
    applyDept: "软件开发部",
    applyReason: "需要加入班课",
  },
  {
    applyName: "张三",
    phonenumber: 15668386863,
    applyDept: "软件开发部",
    applyReason: "需要加入班课",
  }

])

// 用户表格选择性改变
const handleSelectionChange=()=>{

}

// 点击新申请
const newApply=()=>{
  
}
</script>

<style lang="scss" scoped>
.applyList{
    .header{
        padding: 20px 0;
    }
    
    .buttonL{
      .close{
        background: #FFF8E6;
        border: 1px solid #FFE399;
        color:#f1c13d;
        padding: 0 10px;
      }
    }

    .buttonR{
        button{
            margin-left: 20px;
        }
    }

    .operate{
        display: flex; 
        div{
            margin-right: 10px;
            cursor: pointer;
        }
    }

    .operateS{
 
        display: flex;
        align-items: center;
        h2{
            font-size: 14px;
            font-weight: 900;
        }
        span{
            display: block;
            font-weight: 400;
        }
    }

}

</style>

<style>
 .applyList .el-badge__content {
  padding: 2px;
  height: auto;
  font-size: 8px;
}
</style>